import React from "react";

import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { linkTo } from "@storybook/addon-links";


import { Button, Welcome } from "@storybook/react/demo";

import AddressCascader from "../es/index";
import "../assets/index.css";

storiesOf("Welcome", module).add("to Storybook", () => (
  <Welcome showApp={linkTo("Button")} />
));

storiesOf("Button", module)
  .add("with text", () => (
    <Button onClick={action("clicked")}>Hello Button</Button>
  ))
  .add("with some emoji", () => (
    <Button onClick={action("clicked")}>
      <span role="img" aria-label="so cool">
        😀 😎 👍 💯
      </span>
    </Button>
  ));

storiesOf("Cascader", module).add("Cascader", () => {
  const options = [
    {
      value: "330000",
      label: "浙江",
      children: [
        {
          value: "330100",
          label: "杭州市",
          children: [
            {
              value: "330106",
              label: "西湖区"
            },
            {
              value: "330105",
              label: "拱墅区"
            },
            {
              value: "330108",
              label: "滨江区"
            },
            {
              value: "330102",
              label: "上城区"
            },
            {
              value: "330103",
              label: "下城区"
            }
          ]
        },
        {
          value: "330200",
          label: "宁波市",
          children: [
            {
              value: "330204",
              label: "江东区"
            },
            {
              value: "330211",
              label: "镇海区"
            },
            {
              value: "330226",
              label: "宁海区"
            },
            {
              value: "330283",
              label: "奉化区"
            },
            {
              value: "330282",
              label: "慈溪市"
            }
          ]
        }
      ]
    },
    {
      value: "320000",
      label: "江苏",
      children: [
        {
          value: "320100",
          label: "南京",
          children: [
            {
              value: "320114",
              label: "雨花台区"
            },
            {
              value: "320111",
              label: "浦口区"
            },
            {
              value: "320115",
              label: "江宁区"
            },
            {
              value: "320106",
              label: "鼓楼区"
            },
            {
              value: "320105",
              label: "建邺区"
            }
          ]
        }
      ]
    },
    {
      value: "340000",
      label: "安徽"
    },
    {
      value: "350000",
      label: "福建"
    },
    {
      value: "360000",
      label: "江西"
    },
    {
      value: "370000",
      label: "山东"
    },
    {
      value: "410000",
      label: "河南"
    },
    {
      value: "420000",
      label: "湖北"
    },
    {
      value: "430000",
      label: "湖南"
    },
    {
      value: "440000",
      label: "广东"
    },
    {
      value: "450000",
      label: "广西"
    }
  ];

  function onChange(value, selectedOptions, allSelectedOptions) {
    console.log(`value:${value}`);
    console.log(`options:${JSON.stringify(allSelectedOptions)}`);
  }
  return (
    <div style={{padding: 100}}>
      <AddressCascader
        options={options}
        value={['330200','320100']}
        onChange={onChange}
        placeholder="Please select"
        style={{ width: 250 }}
        changeOnSelect
      />
    </div>
  );
});
